<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <meta name="author" content="Coderthemes">
        <title>聊天室测试</title>
        <script src="../public/socket.io.js"></script>
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
        <style>
            .wrapper-page{
                width: 1200px;
                height: 600px;
                border: 1px solid #AABBCC;
                position: relative;
                margin-left: 10%;
            }
            .menu-left{
                width: 295px;
                height: 100%;
                float: left;
                position: absolute;
                border: 1px solid #AABBCC;
            }
            .content{
                width: 900px;
                float: right;
                margin-left: 300px;
                height: 100%;
                border:1px solid  tomato;
            }
            .message{
                width: 900px;
                height: 400px;
                border:1px solid  tomato;
            }
            .sendMsg{
                width: 900px;
                height: 200px;
                border:1px solid #abcedf;
            }
            .img{
                width: 60px;
                height: 60px;
            }
        </style>
        <title></title>
        
    </head>
    <body>
        <div class="wrapper-page">
            <div class="menu-left">
                <div>
                    <input type="text" id="userId" value="592476"><input type="button" value="登录" id="loginBtn">
                </div>
                <div>
                    <input type="text" id="roomId" value="team_849921"><input type="button" value="进入房间" id="joinBtn">
                    <input type="button" value="离开" id="leaveBtn">
                </div>
                <div class="person-item">
                    <ul id="person-ul">
                    </ul>
                </div>
            </div>
            <div class="content">
                <div class="message">
                </div>
                <div class="sendMsg">
                    <textarea style="width: 98%;height: 130px;" id="message"></textarea>
                    <input type="button" value="发送" id="send" style="display: block;float: right;margin-right: 30px;">
                </div>
            </div>
        </div>
        <div style="width:100%;height: 50px;background: #555555;; position:fixed; left:0; bottom:0;color: white;" id="showMsg">
	</body>
    <script>
        $(function(){
            socket = io("ws://127.0.0.1:32510");
            let currentRoomId = "",currentUserId = 0,allUsers = [];
            socket.on('connect', function(){
                showMsg("socket连接成功")
                //登录
                $("#loginBtn").click(function(){
                    currentUserId = $("#userId").val();
                    socket.emit("open",{userId:currentUserId})
                })
                socket.once("open_result", function(data){
                    console.log("1111111111111")
                    console.log(data)
                })
                //进入房间
                $("#joinBtn").click(function(){
                    if(!currentUserId) return;
                    currentRoomId = $("#roomId").val();
                    socket.emit("joinRoom", {roomId:currentRoomId,type:2});
                    socket.emit("roomUsers", {roomId:currentRoomId});
                })
                socket.on("joinRoom", function(list){
                    console.log("房间所有成员")
                    console.log(list);
                    for(let i = 0; i< list.length; i++){
                        addUser(list[i]);
                    }
                    allUsers = allUsers.concat(list);
                })
                socket.on("addUser", function(data){
                    console.log("别人加入房间通知:")
                    console.log(data);
                    addUser(data)
                    allUsers.push(data);
                })

                //离开房间
                $("#leaveBtn").click(function(){
                    socket.emit("leaveRoom", {roomId:currentRoomId});
                })
                socket.on("leaveRoom", function(data){
                    console.log("------------离开房间-----------------")
                    $("#person-ul").html("");
                    for(let i = 0; i< allUsers.length; i++){
                        let user = allUsers[i];
                        if(user.userId == data.userId);
                        allUsers.splice(i, 1);
                    }
                    for(let i = 0; i< allUsers.length; i++){
                        addUser(allUsers[i],true);
                    }
                })

                function addUser(data, flag){
                    let user = allUsers.find((item) => item.userId == data.userId);
                    if(!user || flag){
                        let $li = "<li><img class='img' src='"+data.headimg+"'><span>"+data.nickname+"</span></li>"
                        $("#person-ul").append($li);
                    }
                }

                //发送消息
                $("#send").click(function(){
                    let message = $("#message").val();
                    socket.emit("send_msg", {
                        type:1,
                        msg:message,
                        roomId:currentRoomId
                    })
                })
                socket.on("chat_message", function(data){
                    console.log("聊天室消息:")
                    console.log(data);
                })
            });
            function showMsg(msg){
                $("#showMsg").text(msg);
            }
        })
    </script>
</html>